<template>
  <div class="weather">
    <div class="sec">
      <ul v-for="(item, i) in id" :key="i">
        <li @click="check(item)">{{ item }}</li>
      </ul>
    </div>
    <section class="weathers1">
      <h2>今日天气</h2>
      <p>{{ getYear() }}-{{ getMounth() }}-{{ getDay() }}-{{ i }}</p>
      <p>城市--- {{ list.city }}</p>
      <p>提醒--- {{ list.ganmao }}</p>
      <p>温度--- {{ list.wendu }}</p>
    </section>
    <hr />
    <section class="weathers2">
      <h3>昨日</h3>
      <p>{{ list3.date }}</p>
      <p>{{ list3.fl }}</p>
      <p>{{ list3.fx }}</p>
      <p>{{ list3.high }}</p>
      <p>{{ list3.low }}</p>
      <p>{{ list3.type }}</p>
    </section>
    <hr />
    <section class="weathers3">
      <h3>五日天气</h3>
      <ul v-for="(item, i) in list2" :key="i">
        <li>
          <p>{{ item.date }}</p>
          <p>{{ item.fengli }}</p>
          <p>{{ item.fengxiang }}</p>
          <p>{{ item.high }}</p>
          <p>{{ item.low }}</p>
          <p>{{ item.type }}</p>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import { weather } from "@/api";
export default {
  data() {
    return {
      list: [],
      list2: [],
      list3:'',
      id: ["沈阳", "青岛", "吉林", "北京", "成都", "阜新", "广州"],
      list3: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
      i: "",
      address: "",
    };
  },
  created() {
    this.get();
    this.getDate();
  },
  methods: {
    check(id) {
      this.address = id;
      this.get(id);
    },
    change(i) {
      this.i = this.list3[i - 1];
      console.log(this.i);
    },
    getYear() {
      var myDate = new Date();
      return myDate.getFullYear();
    },
    getMounth() {
      var myDate = new Date();
      return myDate.getMonth() + 1;
    },
    getDay() {
      var myDate = new Date();
      return myDate.getDay();
    },
    getDate() {
      var myDate = new Date();
      let i = myDate.getDay();
      this.change(i);
    },
    get() {
      if (this.address != "") {
         weather(this.address).then((res) => {
        // console.log(res.data.forecast);
        this.list = res.data.data;
        this.list2 = res.data.data.forecast;
      });
      } else {
        let id = "沈阳";
         weather(id).then((res) => {
        // console.log(res.data.forecast);
        this.list = res.data.data;
        this.list2 = res.data.data.forecast;
        this.list3 = res.data.data.yesterday
      });
      }
      // let id = this.$store.state.id 获取用户地址
     
    },
    // get2(id) {
    //   console.log(id, "id");
    //   // let id = this.$store.state.id 获取用户地址
    //   weather(id).then((res) => {
    //     console.log(res.data.data);
    //     // console.log(res.data.forecast);
    //     this.list = res.data.data;
    //     this.list2 = res.data.data.forecast;
    //   });
    // },
  },
};
</script>

<style scoped lang="scss">
.weather {
  > .sec {
    display: flex;
    justify-content: space-around;
    height: 10vh;
    line-height: 10vh;
  }
  font-size: 3vw;
  > .weather2 {
  }
  > .weathers3 {
    > ul {
      > li {
        display: flex;
        justify-content: space-around;
        height: 10vh;
        line-height: 10vh;
      }
    }
  }
}
</style>